import Highcharts from "highcharts";

/**
 * 柱状图配置
 * @param id id名称
 * @param categories  x轴数据
 * @param series Y轴数组数据
 */
export const chartColumn  = (id,categories,series)=>{
    var chart = Highcharts.chart(id,{
        chart: {
            animation: false,
            panning: false, // 禁止放大
            pinchType: false, // 禁用手势操作
            type: 'column',
            style: {
                fontSize: '12px',
            }
        },
        colors:['#7E86FF','#5FBDFF','#E2B775'],
        title: {
            floating: true,
            text: ''
        },
        credits: {enabled: false},
        legend:{
            // enabled: false,
            verticalAlign: 'top',
        },
        accessibility: {
            enabled: false
        },
        xAxis: {
            categories:categories,
            crosshair: true,
            lineColor: '#F3F4F5',
            labels: {
                align:"center",
                y:20,
                style: {
                    fontSize: "12px",
                    color: 'rgba(165, 166, 173, 1)',
                }
            }
        },
        yAxis: {
            gridLineColor: '#F9F9FA',
            min: 0,
            title: {
                align: 'low',
                offset: 0,
                text: '(亿元)',
                rotation: 0,
                y: 20,
                x:-30,
                style: {
                    fontSize: "12px",
                    color: 'rgba(165, 166, 173, 1)',
                }
            },
            labels: {
                style: {
                    fontSize: "12px",
                    color: 'rgba(165, 166, 173, 1)',
                }
            }
        },
        tooltip: {
            // head + 每个 point + footer 拼接成完整的 table
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} 亿</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                borderWidth: 0
            }
        },
        series: series
    });

}